﻿

<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/Echart/CompanyEcharts.js"></script>

<style>
    /*------------------------头部-----------------------------*/
    td .tdimg{
        width:30px;
        height:30px;
        border-radius:3px;
    }
    th, td {
    border-bottom: 1px solid #e4eaec;
}
    .indexTable {
        margin-left: -15px;
        margin-right: -15px;
    }

    .mtlr25 {
        background: #F1F5F6;
        padding: 10px 15px;
    }

    .right {
        background: #F1F5F6;
    }

    .indexTable li > div {
        background: #ffffff;
        margin: 0;
        border-radius: 4px;
        box-shadow: 0px 0px 20px #b7b7b7;
    }

    .alignItemsC {
        display: flex;
        align-items: center;
    }

    .topUlText {
        padding: 10px 0;
    }

        .topUlText > div:nth-child(1) {
            font-size: 0.5em;
            color: #666;
        }

        .topUlText > div:nth-child(2) {
            font-size: 0.5em;
            color: #999;
        }

        .topUlText > div:nth-child(3) {
            font-size: 0.5em;
            color: #999;
        }

    /*------------------------echarts图表-----------------------------*/

    .chart_con {
        height: 460px;
        margin-top: 15px;
        border-radius: 4px;
        position:relative;
    }
      .chart_con .date_con{
          position:absolute;
          top:10px;
          right:21%;
          width:170px;
          z-index:99;
          display:flex;
          align-items:center;
    }
       .chart_con .date_con .iconfont{
        font-size:24px;
        margin-left: 10px;
    }
          .chart_con  .chart__title {
            height: 15%;
            border-bottom: 2px solid #e3e6e6;
            background: white;
            width: 109%; 
            margin-left: -9%; 
        }
     

        .chart_con .chart_body {
            height: 100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }

        .chart_con .chart_body .chart_body_left {
                width: 80.5%;
                height:100%;
                background: white!important;
                border-radius:4px;
                padding-top:15px;
                
            }
        .chart_con .chart_body .chart_body_right {
                width: 18.5%;
                height:100%;
                background: white;
                border-radius:4px;
               
            }
          .chart_con .chart_body .chart_body_right_title {
            height: 15%;
            background: white;
            display:flex;
            align-items:center;
            justify-content:space-around;
            position:relative;
            z-index:999;
        }
            .chart_con .chart_body .chart_body_right_title > input{
          width:30%;
          padding:4px;
        }
         .chart_body_right .check_rate{
            display: flex;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
    padding: 5px 0;
         }
          .chart_body_right .check_rate > div{
              flex:1;
          }
        .chart_body_right .check_rate > div:nth-child(1) > img{
            width:40%;
            display:block;
            margin:0 auto;
        }
        /*------------------二三图表----------------*/
        
    .graph_con {
        height: auto;
        margin-top: 15px;
        border-radius: 4px;
        background:white;
        padding-top:1px;
    }
          .graph_con  .graph_title {
            height: 15%;
            border-bottom: 2px solid #e3e6e6;
            background: white;
        }
           .graph_con  .graph_title > span{
            font-size: 18px;
            color: #31383C;
            font-weight: 550;
        }
    
        .graph_con .graph_body {
            height: 85%;
        }
          .paiming-con {
        width: 27%;
        height: 80%;
        position: absolute;
        top: 12%;
        border-radius: 5px;
        right:0;
    }

        .paiming-con .title {
           height: 50px;
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #cecece;
    width: 90%;
    margin-left: 10%;
        }

       .paiming-con ul {
            height: auto;
          
        }

          .paiming-con ul li {
                display: flex;
                align-items: center;
                margin: 10px 0;
            }

                .paiming-con ul li span:nth-child(1){
                    margin-right: 10px;
                    width:80px;
                    text-align:right;
                }
                .paiming-con ul li span:nth-child(3) {
                    margin-left: 10px;
                    width:60px;
                }
                .circle2{
                 transform-origin: center;
                 transform: rotate(-90deg);
                 transition: stroke-dasharray .3s ease-in;
}
                  .activity_con{
                      padding-left:2%;
                  }
                .activity_con .activity_item{
                    width:48%;
                    display:inline-block;
                    position:relative;
                    margin:20px 0;
                }
                 .activity_con .activity_item .activity_item_info{
                   position:absolute;
                   top:15%;
                   width:110px;
                }
                  .activity_con .activity_item .activity_item_info div{
                  text-align:center;
                }
</style>


<div class="mtlr25" id="mtlr25">
    <ul class="row  indexTable">
        <li class="col-xs-3 ">
            <div class="row alignItemsC padding-left-20 padding-top-10 padding-bottom-10">
                <div class="col-xs-3" style="display: flex; justify-content:center;padding:0">
                    <img src="~/Content/webImgs/indexImg/0.png" style="height:50px" />
                </div>
                <div class="col-xs-9 topUlText">
                    <div style="color: #E96219;font-size:20px"><span id="EnterpriseCount"></span>  <span style="color: #666;font-size:16px">家</span> </div>
                    <div>已入网企业</div>
                </div>
            </div>
        </li>
        <li class="col-xs-3 ">
            <div class="row alignItemsC padding-left-20 padding-top-10 padding-bottom-10">
                <div class="col-xs-3" style="display: flex; justify-content:center;padding:0">
                    <img src="~/Content/webImgs/indexImg/2.png" style="height:50px" />
                </div>
                <div class="col-xs-9 topUlText">
                    <div style="color: #37B5A9; font-size: 20px"><span id="AlreadyCreateCodeCount"></span>  <span style="color: #666;font-size:16px">万</span> </div>
                    <div>已生码数量</div>
                </div>
            </div>
        </li>
        <li class="col-xs-3 ">
            <div class="row alignItemsC padding-left-20 padding-top-10 padding-bottom-10">
                <div class="col-xs-3" style="display: flex; justify-content:center;padding:0">
                    <img src="~/Content/webImgs/indexImg/3.png" style="height:50px" />
                </div>
                <div class="col-xs-9 topUlText">
                    <div style="color: #48B963; font-size: 20px"><span id="AlreadyScanCodeCount"></span> <span style="color: #666;font-size:16px">个</span> </div>
                    <div>已扫码数量</div>
                </div>
            </div>
        </li>
        <li class="col-xs-3 ">
            <div class="row alignItemsC padding-left-20 padding-top-10 padding-bottom-10">
                <div class="col-xs-3" style="display: flex; justify-content:center;padding:0">
                    <img src="~/Content/webImgs/indexImg/4.png" style="height:50px" />
                </div>
                <div class="col-xs-9 topUlText">
                    <div style="color: #2FB6A8; font-size: 20px"><span id="ToDayScanCodeCount"></span>  <span style="color: #666;font-size:16px">个</span> </div>
                    <div>今日扫码数量</div>
                </div>
            </div>
        </li>
    </ul>

    <ul id="EchartsTab" class="myTabs nav nav-tabs" role="tablist" style="display:flex;align-items:center">
        <li role="presentation" class="active">
            <a href="#Security" id="province-tab" role="tab" data-toggle="tab" aria-controls="province" aria-expanded="true">防伪统计</a>
        </li>
        <li role="presentation" class="">
            <a href="#FleeGoods" role="tab" data-toggle="tab" aria-controls="area" aria-expanded="false">窜货统计</a>
        </li>
        <li role="presentation" class="">
            <a href="#Traceability" role="tab" data-toggle="tab" aria-controls="city" aria-expanded="false">溯源统计</a>
        </li>
        <li role="presentation" class="">
            <a href="#Marketing" role="tab" data-toggle="tab" aria-controls="city" aria-expanded="false">营销统计</a>
        </li>
    </ul>

    <div class="tab-content">
        @*------------------------------------------防伪--------------------------------------*@
        <div role="tabpanel" class="tab-pane fade in active" id="Security" aria-labelledby="province-tab">

            <div class="chart_con">
                <div class="chart_body">
                    <div class="chart_body_left" id="Security_bar">
                    </div>
                    <div class="chart_body_right" style="border-left: 1px solid #e3e6e6;">
                        <div class="chart_body_right_title" style="width: 130%; margin-left: -30%;">
                            <input class="form-control ChooceYear" id="SecurityStartYear" type="text" name="name" value="" placeholder="开始年份" />
                            <input class="form-control ChooceYear" id="SecurityEndYear" type="text" name="name" value="" placeholder="结束年份" />
                            <input id="selectYear" style="background:#EEEEEE" class="btn btn-default" type="button" value="查询" />
                        </div>
                        <div class="check_rate" style="border-top: 1px solid #e3e6e6;">
                            <div>
                                <img src="~/Content/webImgs/indexImg/9.png" />
                                <div style="text-align:center">微信查询</div>
                            </div>
                            <div>
                                <div id="TotalWeChat" style="text-align:center;color:#ADBD27; font-size:25px;line-height:1.2"></div>
                                <div style="text-align:center;line-height: 1.4;">
                                    查询率：<span id="WeChatRate"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    正常率：<span id="WeChatNormalPercent"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    异常率：<span id="WeChatNotPercent"></span>
                                </div>
                            </div>

                        </div>

                        <div class="check_rate">
                            <div>
                                <img src="~/Content/webImgs/indexImg/8.png" />
                                <div style="text-align:center">网站查询</div>
                            </div>
                            <div>
                                <div id="TotalWeb" style="text-align:center;color:#EB611A;font-size:25px;line-height:1.2"></div>
                                <div style="text-align:center;line-height: 1.4;">
                                    查询率：<span id="WebSiteRate"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    正常率：<span id="WebSiteNormalPercent"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    异常率：<span id="WebSiteNotPercent"></span>
                                </div>
                            </div>

                        </div>

                        <div class="check_rate">
                            <div>
                                <img src="~/Content/webImgs/indexImg/7.png" />
                                <div style="text-align:center">电话查询</div>
                            </div>
                            <div>
                                <div id="TotalTel" style="text-align:center;color:#3FB15A;font-size:25px;line-height:1.2"></div>
                                <div style="text-align:center;line-height: 1.4;">
                                    查询率：<span id="TelRate"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    正常率：<span id="TelNormalPercent"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    异常率：<span id="TelNotPercent">1%</span>
                                </div>
                            </div>

                        </div>

                        <div class="check_rate">
                            <div>
                                <img src="~/Content/webImgs/indexImg/6.png" />
                                <div style="text-align:center">短信查询</div>
                            </div>
                            <div>
                                <div id="TotalSNS" style="text-align:center;color:#2FB6A8;font-size:25px;line-height:1.2"></div>
                                <div style="text-align:center;line-height: 1.4;">
                                    查询率：<span id="SNSRate"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    正常率：<span id="SNSNormalPercent"></span>
                                </div>
                                <div style="text-align:center;line-height: 1.4;">
                                    异常率：<span id="SNSNotPercent">1%</span>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <div class="graph_con">
                <div class="graph_title" style="display: flex;align-items:center;justify-content:space-between;padding:20px;">
                    <span>防伪实时查询数据</span>
                    <a onclick="$.MGJ.Common.loadurl(this, '/AntiFake/QueryStatistics','0','0','0')">查看更多</a>
                </div>
                <div class="graph_body">
                    <table class="table">
                        <thead id="SecurityColspanNub">
                            <tr>
                                <th>身份码</th>
                                <th>图标</th>
                                <th>查询方式</th>
                                <th>昵称</th>
                                <th>查询者</th>
                                <th>查询时间</th>
                                <th>窜货状态</th>
                                <th>查询结果</th>
                                <th>归属地</th>
                            </tr>
                        </thead>
                        <tbody id="SecurityRealtimeQuery"></tbody>
                    </table>

                </div>
            </div>

            <div class="graph_con" style="height:550px;position:relative;">
                <div class="graph_title" style="display:flex;align-items:center;padding:0 20px;height:12%">
                    <span>防伪区域排名</span>
                </div>
                <div class="graph_body" id="Security_map" style="height:88%">
                </div>
                <div class="paiming-con">
                    <div class="title">
                        查询排名
                    </div>
                    <ul id="SecurityTopTenPlace">
                    </ul>
                </div>
            </div>

        </div>
        @*------------------------------------------窜货--------------------------------------*@
        <div role="tabpanel" class="tab-pane fade in" id="FleeGoods" aria-labelledby="area-tab">

            <div class="chart_con">
                <div class="date_con">
                    <input onchange="FleeGoods(this.value)" id="FleeGoodsYear" class="form-control ChooceYear" type="text" name="name" value="" placeholder="请选择年份" />
                    <label for="FleeGoodsYear" class="iconfont icon-riqi"></label>
                </div>
                <div class="chart_body">
                    <div class="chart_body_left" id="FleeGoods_bar">
                    </div>
                    <div class="chart_body_right">
                        <div class="chart_body_right_title" style="border-bottom: 2px solid #e3e6e6;font-size: 20px;">
                            经销商发货排名
                        </div>
                        <div class="dealer_con">
                            <ul style="padding:0 20px;">
                             
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="graph_con">
                <div class="graph_title" style="display: flex;align-items:center;justify-content:space-between;padding:20px;">
                    <span>窜货实时查询数据</span>
                    <a onclick="$.MGJ.Common.loadurl(this, '/FleeGoods/PreventFlee','0','0','0')">查看更多</a>
                </div>
                <div class="graph_body">
                    <table class="table">
                        <thead id="FleeGoodsColspanNub">
                            <tr>
                                <th>身份码</th>
                                <th>图标</th>
                                <th>查询方式</th>
                                <th>昵称</th>
                                <th>查询者</th>
                                <th>查询时间</th>
                                <th>窜货状态</th>
                                <th>查询结果</th>
                                <th>归属地</th>
                            </tr>
                        </thead>
                        <tbody id="FleeGoodsRealtimeQuery"></tbody>
                    </table>

                </div>
            </div>

            <div class="graph_con" style="height: 550px;position:relative;">
                <div class="graph_title" style="display: flex; align-items: center; padding:0 20px;height:12%">
                    <span>窜货区域排名</span>
                </div>
                <div class="graph_body" id="FleeGoods_map" style="height:88%">
                </div>
                <div class="paiming-con">
                    <div class="title">
                        查询排名
                    </div>
                    <ul id="FleeGoodsTopTenPlace">
                     

                    </ul>
                </div>
            </div>

        </div>
        @*------------------------------------------溯源--------------------------------------*@
        <div role="tabpanel" class="tab-pane fade in" id="Traceability">

            <div class="chart_con">
                <div class="date_con">
                    <input onchange="Traceability(this.value)" id="TraceabilityYear" class="form-control ChooceYear" type="text" name="name" value="" placeholder="请选择年份" />
                    <label for="TraceabilityYear" class="iconfont icon-riqi"></label>
                </div>
                <div class="chart_body">
                    <div class="chart_body_left" id="Traceability_bar">
                    </div>
                    <div class="chart_body_right">
                        <div class="chart_body_right_title" style="border-bottom: 2px solid #e3e6e6;font-size: 20px;">
                            扫码产品排名
                        </div>
                        <div class="product_con">
                            <ul style="padding:0 20px;">
                                <li style="display:flex;align-items:center;justify-content:space-between;font-size:16px;">
                                    <span>产品名称</span><span>扫码数</span>
                                </li>
                                @*<li style="display:flex;align-items:center;justify-content:space-between;margin:5px 0">
                                    <span>1.北京市</span><span>1136次</span>
                                </li>*@
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

            <div class="graph_con">
                <div class="graph_title" style="display: flex;align-items:center;justify-content:space-between;padding:20px;">
                    <span>溯源实时查询数据</span>
                    <a onclick="$.MGJ.Common.loadurl(this, '/OriginsSearch/CodeLogList_V','0','0','0')">查看更多</a>
                </div>
                <div class="graph_body">
                    <table class="table">
                        <thead id="TraceabilityColspanNub">
                            <tr>
                                <th>防伪码</th>
                                <th>图标</th>
                                <th>查询方式</th>
                                <th>昵称</th>
                                <th>查询者</th>
                                <th>查询时间</th>
                                <th>关注状态</th>
                                <th>查询结果</th>
                                <th>归属地</th>
                            </tr>
                        </thead>
                        <tbody id="TraceabilityRealtimeQuery"></tbody>
                    </table>

                </div>
            </div>

            <div class="graph_con" style="height: 550px;position:relative;">
                <div class="graph_title" style="display: flex; align-items: center; padding:0 20px;height:12%">
                    <span>溯源区域排名</span>
                </div>
                <div class="graph_body" id="Traceability_map" style="height:88%">
                </div>
                <div class="paiming-con">
                    <div class="title">
                        查询排名
                    </div>
                    <ul id="TraceabilityTopTenPlace">
                        <li>
                            <span>北京市</span>
                            <div class="progress" style="margin:0;flex:1">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                </div>
                            </div>
                            <span>1136次</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        @*------------------------------------------营销--------------------------------------*@
        <div role="tabpanel" class="tab-pane fade in" id="Marketing">

            <div class="chart_con">
                <div class="date_con" style="width:230px;right:23%">
                    <input style="margin-right:15px;" id="MarketingStartDate" class="form-control ChooceYear" type="text" name="name" value="" placeholder="选择年份" />
                    <input onchange="Marketing($(this).prev().val(),this.value)" id="MarketingMonth" class="form-control MarketingMonth" type="text" name="name" value="" placeholder="选择月份" />
                    <label for="MarketingStartDate" class="iconfont icon-riqi"></label>
                </div>
                <div class="chart_body">
                    <div class="chart_body_left" id="Marketing_bar" style="width:79%;">
                    </div>
                    <div class="chart_body_right" style="width:20%;">
                        <div class="chart_body_right_title" style="border-bottom: 2px solid #e3e6e6;font-size: 20px;">
                            活动项目排名
                        </div>
                        <div id="activity_con" class="activity_con">
                          
                        </div>

                    </div>
                </div>
            </div>

            <div class="graph_con">
                <div class="graph_title" style="display: flex;align-items:center;justify-content:space-between;padding:20px;">
                    <span> 活动实时查询数据</span>
                    <a onclick="$.MGJ.Common.loadurl(this, '/Market/CustomerInfo','0','0','0')">查看更多</a>
                </div>
                <div class="graph_body">
                    <table class="table">
                        <thead id="MarketingColspanNub">
                            <tr>
                                <th>头像</th>
                                <th>微信名</th>
                                <th>领奖防伪码</th>
                                <th>活动名</th>
                                <th>获得奖项</th>
                                <th>获奖金额</th>
                                <th>领奖时间</th>
                                <th>手机号码</th>
                            </tr>
                        </thead>
                        <tbody id="MarketingRealtimeQuery"></tbody>
                    </table>

                </div>
            </div>

            <div class="graph_con" style="height: 550px;position:relative;">
                <div class="graph_title" style="display: flex; align-items: center; padding:0 20px;height:12%">
                    <span>领奖区域排名</span>
                </div>
                <div class="graph_body" id="Marketing_map" style="height:88%">
                </div>
                <div class="paiming-con">
                    <div class="title">
                        查询排名
                    </div>
                    <ul id="MarketingTopTenPlace">
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>




<script>

    
    $(".ChooceYear").datepicker({
        autoclose: true,
        startView: 2,
        maxViewMode: 2,
        minViewMode: 2,
        format: "yyyy",
        forceParse: false,
        orientation: 'bottom',
        language: 'cn',
    })
    $(".MarketingMonth").datepicker({
        autoclose: true,
        startView: 2,
        maxViewMode: 1,
        minViewMode: 1,
        format: "mm",
        forceParse: false,
        orientation: 'bottom',
        language: 'cn',
    })
    // 微信昵称解码
    function WXDecode(input) {
    _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    while (i < input.length) {
        enc1 = _keyStr.indexOf(input.charAt(i++));
        enc2 = _keyStr.indexOf(input.charAt(i++));
        enc3 = _keyStr.indexOf(input.charAt(i++));
        enc4 = _keyStr.indexOf(input.charAt(i++));
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
        output = output + String.fromCharCode(chr1);
        if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
        }
    }
    output = _utf8_decode(output);
    return output;
    }
    function _utf8_decode(utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
        while (i < utftext.length) {
            c = utftext.charCodeAt(i);
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
        }
        return string;
    }


    //转换Date(12454565445)时间
    function DateFormat(val) {
        var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
        //月份为0-11，所以+1，月份小于10时补个0
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var currentHour = date.getHours();
        var currentMin = date.getMinutes();
        var currentSecond = date.getSeconds();
        var dd = date.getFullYear() + "-" + month + "-" + currentDate + ' ' + currentHour + ':' + currentMin + ':' + currentSecond;
        return dd;
    }
    //信息滚动
    function RollMessage(ele, speed) {
        var timer;
        var scroll_top = 0;
        var obj = $(ele);
        var li_height = obj.find("ul.roll li:first").height();
        obj.hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(function () {
                scroll_top++;
                if (scroll_top >= li_height) {
                    scroll_top = 0;
                    obj.find("ul.roll li:first").appendTo(obj.find("ul.roll"));
                }
                obj.find("ul.roll").css("margin-top", -scroll_top);
            }, speed || 40);
        }).trigger("mouseleave");
    }
    //地图排名
    function TopTenPlace(res,selector) {
        var html = '';
        if (res.length == 0) {
            res = [{ name: '北京', value: '3306' }];
        }
        for (var i = 0; i < res.length; i++) {
            var persent = (res[i].value / (res[0].value * 1.5)).toFixed(2) * 100 + '%';
            res[i].name = res[i].name || '上海';
            html += ' <li>\n' +
                '                            <span>' + res[i].name + '</span>\n' +
                '                            <div class="progress" style="margin:0;flex:1">\n' +
                '                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + res[i].value + '" aria-valuemin="0" aria-valuemax="' + res[0].value * 1.5 + '" style="width: ' + persent + '">\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <span>' + res[i].value + '次</span>\n' +
                '                        </li>'
        }
        $('#' + selector).html(html);

    }
    //----------------------------------------tab切换----------------------------------------

    $('#EchartsTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      
        if (e.target.innerText=='防伪统计') {
            Security();
        }
        else if (e.target.innerText == '窜货统计')
        {
            FleeGoods();
        }
        else if (e.target.innerText == '溯源统计') {
            Traceability();
        }
        else{
            Marketing();
        }
      
    })
   
    //----------------------------------------头部四个数据----------------------------------------

    function BindHeadFour(data) {
        if (data.GenCoodeNums>10000)
        {
            $("#AlreadyCreateCodeCount").text((data.GenCoodeNums/10000).toFixed(2));
        }
        else {
            $("#AlreadyCreateCodeCount").text(data.GenCoodeNums).next('span').text('个');
        }
                    $("#AlreadyScanCodeCount").text(data.ScaningCodeCount);
                    $("#EnterpriseCount").text(data.EnterpriseCount);
                    $("#ToDayScanCodeCount").text(data.TodayScanCodeCount);
    }
   
    //----------------------------------------防伪 Security--------------------------------------------------
    $('#selectYear').click(function () {
        Security($('#SecurityStartYear').val(), $('#SecurityEndYear').val());
    })
    Security();
    function Security(startYear, endYear) {
        if (startYear && endYear) {
            if (endYear - startYear >= 0) {
                $.L.ajaxHandle({
                    url: ACTION_URL("GetAntiFakeDataAnalyseResult", "DataAnalyse"),
                    data: {
                        sYear: startYear,
                        eYear: endYear
                    },
                    success: function (response) {
                     
                        Security_bar(response.AntifakeYearAnalyse.MonthList, startYear, endYear);
                    }
                });
            }
            else {
                $('#SecurityEndYear').val('');
                $.L.msgWarning('结束年份不能小于开始年份！');
            }
        }
        else {
         
            $.L.ajaxHandle({
                url: ACTION_URL("GetAntiFakeDataAnalyseResult", "DataAnalyse"),
                success: function (response) {
                    BindHeadFour(response.GlobalDataAnalyse);
                    Security_bar(response.AntifakeYearAnalyse.MonthList);
                    QueryRate(response.AntifakeYearAnalyse);
                    SecurityRealtimeQuery(response.SearchTopTen);
                    TopTenPlace(response.SearchTopTenPlace, 'SecurityTopTenPlace');
                    Security_map(response.SearchTopTenPlace)
                }
            });
        } 
  
    }

    //防伪柱状图
    function Security_bar(res, sYear, eYear) {
        sYear = parseInt(sYear);
        eYear = parseInt(eYear);
        var YearLength = eYear - sYear;
        var year = new Date().getFullYear();
        var yearArr = [];
        var xArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        if (sYear && eYear) {
            if (YearLength==0){
                year = sYear;
            }
            else {
                year = sYear + ' ~ ' + eYear;
                for (var i = 0; i <= YearLength; i++) {
                    yearArr.push(sYear + '年');
                    sYear++;
                }
                //console.log(yearArr);
                xArr = yearArr;
            }
        }
   
        var Security_bar_option = {
            title: {
                text: year+'年数据统计',
            },
            noDataLoadingOption: {
                text: '暂无数据😭，敬请期待(*^_^*)！',
                effect: 'bar',
                textStyle: {
                    fontSize:16,
                }
            },
            tooltip: {
                trigger: 'item'
            },
 
            color: ['#ADBD27', '#EA6119', '#3EB05A', '#2FB6A8'],
            legend: {
                data: ['微信查询', '网站查询', '电话查询', '短信查询']
            },
            grid: {
                x:45,
                x2: 20,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: false },
                    dataView: { show: false, readOnly: false },
                    magicType: {
                        show: true,
                        title: {
                            line: '折线图切换',
                            bar: '柱形图切换',
                        },
                        type: ['line', 'bar']
                    },
                    restore: { show: false },
                    saveAsImage: { show: false }
                },
                y: '3',
                x:'200'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: xArr,
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [{  
            type : 'value',  
            }
            ],
            series: [
                {
                    name: '微信查询',
                    type: 'bar',
                    data: res.WebSite,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                },
                {
                    name: '网站查询',
                    type: 'bar',
                    stack: 'sum',
                    data: res.SNS,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
                ,
                {
                    name: '电话查询',
                    type: 'bar',
                    stack: 'sum',
                    data: res.TEL,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
                ,
                {
                    name: '短信查询',
                    type: 'bar',
                    data: res.WeChat,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
            ]
        };


        var Security_bar_ele =document.getElementById('Security_bar');
        if (Security_bar_ele)
        {
            echarts.init(Security_bar_ele).setOption(Security_bar_option);
        }
       
    }
    //防伪查询率
    function QueryRate(data) {
        var TotalNum = data.TotalWeChat + data.TotalWeb + data.TotalSNS + data.TotalTel;
        if (TotalNum==0)
        {
            TotalNum = 1;
            data.WeChatNormalPercent = data.WebSiteNormalPercent = data.SNSNormalPercent = data.TelNormalPercent = 100;
        }
        //微信
        $('#WeChatRate').text(parseInt(data.TotalWeChat / TotalNum * 100) + '%');
        $('#TotalWeChat').text(data.TotalWeChat);
        $('#WeChatNormalPercent').text(data.WeChatNormalPercent + '%');
        $('#WeChatNotPercent').text((100-data.WeChatNormalPercent)+ '%');
        //网站
        $('#WebSiteRate').text(parseInt(data.TotalWeb / TotalNum * 100) + '%');
        $('#TotalWeb').text(data.TotalWeb);
        $('#WebSiteNormalPercent').text(data.WebSiteNormalPercent + '%');
        $('#WebSiteNotPercent').text((100 - data.WebSiteNormalPercent) + '%');
        //短信
        $('#SNSRate').text(parseInt(data.TotalSNS / TotalNum * 100) + '%');
        $('#TotalSNS').text(data.TotalSNS);
        $('#SNSNormalPercent').text(data.SNSNormalPercent + '%');
        $('#SNSNotPercent').text((100 - data.SNSNormalPercent)+ '%');
        //电话
        $('#TelRate').text(parseInt(data.TotalTel / TotalNum * 100) + '%');
        $('#TotalTel').text(data.TotalTel);
        $('#TelNormalPercent').text(data.TelNormalPercent + '%');
        $('#TelNotPercent').text((100 - data.TelNormalPercent)+ '%');
    }
    //防伪表格
    function SecurityRealtimeQuery(data) {
        var trHtml = '';
        var imgUrl = '';
        var imgUrlArr = ['/Content/webImgs/indexImg/9.png', '/Content/webImgs/indexImg/8.png', '/Content/webImgs/indexImg/7.png', '/Content/webImgs/indexImg/6.png'];
        for (var i = 0;i<data.length; i++)
        {
            data[i].PlaceForBelong = data[i].PlaceForBelong || '上海';
            if (data[i].Valid==1) {
                data[i].Valid = '真码';
            }
            else {
                data[i].Valid = '假码';
            }
          
            //0微信 1网站  2短信 3手机
            if (data[i].QueryType==0)
            {
                //imgUrl = imgUrlArr[0];
                imgUrl = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJGicglyhiaqhIjF3J8LEyMd2N0N3F6RbS1eDrxQfKckSUtEFuvMp1ca5TsM0HtwUDyy5sNZMlfjvdA/132';
                data[i].QueryType = '微信';
            }
            else if (data[i].QueryType == 1)
            {
                imgUrl = imgUrlArr[1];
                data[i].QueryType = '网站';
            }
            else if (data[i].QueryType == 2) {
                imgUrl = imgUrlArr[2];
                data[i].QueryType = '电话';
            }
            else{
                imgUrl = imgUrlArr[3];
                data[i].QueryType = '短信';
            }
      
            trHtml += '<tr>\n' +
'                                <td>' + data[i].Code + '</td>\n' +
'                                <td><img class="tdimg" src=' + imgUrl + ' /></td>\n' +
'                                <td>' + data[i].QueryType + '</td>\n' +
'                                <td>110</td>\n' +
'                                <td>' + data[i].QueryIp + '</td>\n' +
'                                <td>' + data[i].QueryTime + '</td>\n' +
'                                <td>' + data[i].Antifleeing + '</td>\n' +
'                                <td>' + data[i].Valid + '</td>\n' +
'                                <td>' + data[i].PlaceForBelong + '</td>\n' +
'                            </tr>'
        }
        $('#SecurityRealtimeQuery').html(trHtml);
    }
    //防伪地图
    function Security_map(res) {
        if (res.length == 0) {
            res=[{ name: '北京', value: '3306' }];
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        else {
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        var Security_map_option = {
            title: {
                text: '区域查询量',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
        
            dataRange: {
                min: 0,
                max: maxValue,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },

            series: [
                {
                    name: '防伪',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: res
                }
            ]
        };

        var Security_map_ele = document.getElementById('Security_map');
        if(Security_map_ele)
        {
            echarts.init(Security_map_ele).setOption(Security_map_option);
        }
    }


    //----------------------------------------窜货 FleeGoods--------------------------------------------------
    function FleeGoods(year) {
        $.L.ajaxHandle({
            url: ACTION_URL("GetAntifleeingDataAnalyseResult", "DataAnalyse"),
            data: { sYear: year },
            success: function (response) {
                if (year)
                {
                    FleeGoods_line(response.InOrOutOrReturnAnalse, year);
                }
                else {
                    FleeGoods_line(response.InOrOutOrReturnAnalse);
                    OutTop(response.OutTopSeven);
                    FleeGoodsRealtimeQuery(response.SearchTopTen);
                    TopTenPlace(response.AntifleeingTopTenForAntifake, 'FleeGoodsTopTenPlace');
                    FleeGoods_map(response.AntifleeingTopTenForAntifake);
                }
               
            }
        });
    }
    //窜货折线图
    function FleeGoods_line(res, Year) {
        var year = new Date().getFullYear();
        var monthArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        if (Year) {
            year = Year;
        }
        var FleeGoods_bar_option = {
            title: {
                text: year + '年数据统计',
            },
            noDataLoadingOption: {
                text: '暂无数据😭，敬请期待(*^_^*)！',
                effect: 'bar',
                textStyle: {
                    fontSize: 16,
                }
            },
            tooltip: {
                trigger: 'item'
            },
            color: ['#30B4E0', '#F7931E', '#ACBD28'],
            legend: {
                data: ['入库', '出库', '退货']
            },
            grid: {
                x: 45,
                x2: 20,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: false },
                    dataView: { show: false, readOnly: false },
                    magicType: {
                        show: true,
                        title: {
                            line: '折线图切换',
                            bar: '柱形图切换',
                        },
                        type: ['line', 'bar']
                    },
                    restore: { show: false },
                    saveAsImage: { show: false }
                },
                y: '3',
                x: '200'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: monthArr,
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [{
                type: 'value',
            }
            ],
            series: [
                {
                    name: '入库',
                    type: 'line',
                    data: res.InWarehouse,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                },
                {
                    name: '出库',
                    type: 'line',
                    data: res.OutWarehouse,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
                ,
                {
                    name: '退货',
                    type: 'line',
                    data: res.ReturnGoods,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
            ]
        };
        var FleeGoods_bar_ele = echarts.init(document.getElementById('FleeGoods_bar'))
        FleeGoods_bar_ele.setOption(FleeGoods_bar_option);

    }
    //发货排名
    function OutTop(res) {
        var html = '';
        var total =0;
        for (var y in res) {
            total = total + res[y]
        }
        for (var x in res) {
            //x 是属性; res[x]是属性对应的值；
            var percent = (res[x] / total).toFixed(2) * 100 + '%';
            html += '<li><div style="display:flex;align-items:center;justify-content:space-between"><span>' + x + '</span><span>' + res[x] + '</span></div><div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:' + percent + '"></div></div></li>'
        }
        $('.dealer_con ul').html(html);
    }
    //窜货表格
    function FleeGoodsRealtimeQuery(data) {
        var trHtml = '';
        var imgUrl = '';
        var imgUrlArr = ['/Content/webImgs/indexImg/9.png', '/Content/webImgs/indexImg/8.png', '/Content/webImgs/indexImg/7.png', '/Content/webImgs/indexImg/6.png'];
        for (var i = 0; i < data.length; i++) {
            if (data[i].Valid == 1) {
                data[i].Valid = '真码';
            }
            else {
                data[i].Valid = '假码';
            }

            //0微信 1网站  2短信 3手机
            if (data[i].QueryType == 0) {
                //imgUrl = imgUrlArr[0];
                imgUrl = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJGicglyhiaqhIjF3J8LEyMd2N0N3F6RbS1eDrxQfKckSUtEFuvMp1ca5TsM0HtwUDyy5sNZMlfjvdA/132';
                data[i].QueryType = '微信';
            }
            else if (data[i].QueryType == 1) {
                imgUrl = imgUrlArr[1];
                data[i].QueryType = '网站';
            }
            else if (data[i].QueryType == 2) {
                imgUrl = imgUrlArr[2];
                data[i].QueryType = '电话';
            }
            else {
                imgUrl = imgUrlArr[3];
                data[i].QueryType = '短信';
            }
            data[i].PlaceForBelong = data[i].PlaceForBelong || '上海';
            trHtml += '<tr>\n' +
'                                <td>' + data[i].Code + '</td>\n' +
'                                <td><img class="tdimg" src=' + imgUrl + ' /></td>\n' +
'                                <td>' + data[i].QueryType + '</td>\n' +
'                                <td>110</td>\n' +
'                                <td>' + data[i].QueryIp + '</td>\n' +
'                                <td>' + data[i].QueryTime + '</td>\n' +
'                                <td>' + data[i].Antifleeing+ '</td>\n' +
'                                <td>' + data[i].Valid + '</td>\n' +
'                                <td>' + data[i].PlaceForBelong + '</td>\n' +
'                            </tr>'
        }
        $('#FleeGoodsRealtimeQuery').html(trHtml);
    }
    //窜货地图
    function FleeGoods_map(res) {
        if (res.length == 0) {
            res.push[{ name: '北京', value: '3306' }];
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        else {
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        var FleeGoods_map_option = {
            title: {
                text: '区域查询量',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
      
            dataRange: {
                min: 0,
                max: maxValue,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },

            series: [
                {
                    name: '窜货',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: res,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
            ]
        };

        var FleeGoods_map_ele = echarts.init(document.getElementById('FleeGoods_map'))
        FleeGoods_map_ele.setOption(FleeGoods_map_option);
    }

    //----------------------------------------溯源 Traceability--------------------------------------------------
    function Traceability(year) {
        $.L.ajaxHandle({
            url: ACTION_URL("GetOriginsDataAnalyseResult", "DataAnalyse"),
            data: { sYear: year },
            success: function (response) {
                if (year) {
                    Traceability_bar(response.OriginsMaterial, year);
                }
                else {
                    //console.log(response)
                    ProductOrder(response.ScanCodeTopSevenForProduct)
                    Traceability_bar(response.OriginsMaterial);
                    TraceabilityRealtimeQuery(response.SearchTopTen);
                    TopTenPlace(response.SearchTopTenPlace, 'TraceabilityTopTenPlace');
                    Traceability_map(response.SearchTopTenPlace);
                }
               
            }
        });
    }
    //溯源柱状图
    function Traceability_bar(res, Year) {
        var year = new Date().getFullYear();
        var monthArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        if (Year) {
            year = Year;
        }
        var Traceability_bar_option = {
            title: {
                text: year + '年数据统计',
            },
            noDataLoadingOption: {
                text: '暂无数据😭，敬请期待(*^_^*)！',
                effect: 'bar',
                textStyle: {
                    fontSize: 16,
                }
            },
            tooltip: {
                trigger: 'item'
            },
            color: ['#30B4E0'],
            legend: {
                data: ['溯源']
            },
            grid: {
                x: 45,
                x2: 20,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: false },
                    dataView: { show: false, readOnly: false },
                    magicType: {
                        show: true,
                        title: {
                            line: '折线图切换',
                            bar: '柱形图切换',
                        },
                        type: ['line', 'bar']
                    },
                    restore: { show: false },
                    saveAsImage: { show: false }
                },
                y: '3',
                x: '200'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: monthArr,
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [{
                type: 'value',
            }
            ],
            series: [
                {
                    name: '溯源',
                    type: 'bar',
                    data: res,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }
            ]
        };
        var Traceability_bar_ele = echarts.init(document.getElementById('Traceability_bar'))
        Traceability_bar_ele.setOption(Traceability_bar_option);

    }

    //扫码产品排名
    function ProductOrder(res) {
        $('.product_con >ul').html('');
        var html = '';
        for (var i = 0; i < res.length; i++) {
            html += '<li style="display:flex;align-items:center;justify-content:space-between;margin:5px 0"><span>' + (i + 1) + '.' + res[i].Name + '</span><span>' + res[i].Value + '次</span></li>'
        }
        $('.product_con >ul').append(html);
    }

    //溯源表格
    function TraceabilityRealtimeQuery(data) {
        var trHtml = '';
        var imgUrl = '';
        var imgUrlArr = ['/Content/webImgs/indexImg/9.png', '/Content/webImgs/indexImg/8.png', '/Content/webImgs/indexImg/7.png', '/Content/webImgs/indexImg/6.png'];
        for (var i = 0; i < data.length; i++) {
            data[i].PlaceForBelong = data[i].PlaceForBelong || '上海';
            if (data[i].Valid == 1) {
                data[i].Valid = '真码';
            }
            else {
                data[i].Valid = '假码';
            }

            //0微信 1网站  2短信 3手机
            if (data[i].QueryType == 0) {
                //imgUrl = imgUrlArr[0];
                imgUrl = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJGicglyhiaqhIjF3J8LEyMd2N0N3F6RbS1eDrxQfKckSUtEFuvMp1ca5TsM0HtwUDyy5sNZMlfjvdA/132';
                data[i].QueryType = '微信';
            }
            else if (data[i].QueryType == 1) {
                imgUrl = imgUrlArr[1];
                data[i].QueryType = '网站';
            }
            else if (data[i].QueryType == 2) {
                imgUrl = imgUrlArr[2];
                data[i].QueryType = '电话';
            }
            else {
                imgUrl = imgUrlArr[3];
                data[i].QueryType = '短信';
            }
            trHtml += '<tr>\n' +
'                                <td>' + data[i].Code + '</td>\n' +
'                                <td><img class="tdimg" src=' + imgUrl + ' /></td>\n' +
'                                <td>' + data[i].QueryType + '</td>\n' +
'                                <td>110</td>\n' +
'                                <td>' + data[i].QueryIp + '</td>\n' +
'                                <td>' + data[i].QueryTime + '</td>\n' +
'                                <td>' + data[i].Antifleeing + '</td>\n' +
'                                <td>' + data[i].Valid + '</td>\n' +
'                                <td>' + data[i].PlaceForBelong + '</td>\n' +
'                            </tr>'
        }
        $('#TraceabilityRealtimeQuery').html(trHtml);
    }
  
    //溯源地图
    function Traceability_map(res) {
        if (res.length == 0) {
            res.push[{ name: '北京', value: '3306' }];
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        else {
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        var Traceability_map_option = {
            title: {
                text: '区域查询量',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
      
            dataRange: {
                min: 0,
                max: maxValue,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },

            series: [
                {
                    name: '溯源',
                    type: 'map',
                    mapType: 'china',
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: res
                }
               
                
            ]
        };

        var Traceability_map_ele = echarts.init(document.getElementById('Traceability_map'))
        Traceability_map_ele.setOption(Traceability_map_option);
    }
    //----------------------------------------营销 Marketing--------------------------------------------------
    function Marketing(year, month) {
        if (year && month)
        {
            $.L.ajaxHandle({
                url: ACTION_URL("GetActivityDataAnalyseResult", "DataAnalyse"),
                data: {sYear:year,sMonth:month},
                success: function (response) {
                    Marketing_line(response.ActivityAnalyse, year, month);
                }
            });
        }
        else if(!year && !month){
            $.L.ajaxHandle({
                url: ACTION_URL("GetActivityDataAnalyseResult", "DataAnalyse"),
                success: function (response) {
                    //console.log(response)
                    Circle(response.ActivityProjectAnalyse)
                    Marketing_line(response.ActivityAnalyse);
                    MarketingRealtimeQuery(response.AwardTopSeven);
                    TopTenPlace(response.PlaceTopTen, 'MarketingTopTenPlace');
                    Marketing_map(response.PlaceTopTen);
                }
            });
        }
        else {
            $.L.msgWarning('年份和月份都不能为空，请检查！');
        }
   
  
    }
    //营销折线图
    function Marketing_line(res,sYear,sMonth) {
        var dateArr = [];
        for (var i = 1; i <= res.ScanCount.length; i++) {
            dateArr.push(i + '日');
        }
        if (sYear && sMonth)
        {
            var year = sYear;
            var month = sMonth;
        }
        else {
            var year = new Date().getFullYear();
            var month = (new Date().getMonth()) + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth()) + 1;
        }
    
        var Marketing_bar_option = {
            title: {
                text: year + '年' + month + '月数据统计',
            },
            noDataLoadingOption: {
                text: '暂无数据😭，敬请期待(*^_^*)！',
                effect: 'bar',
                textStyle: {
                    fontSize: 16,
                }
            },
            tooltip: {
                trigger: 'item'
            },
 
            color: ['#30B4E0', '#F7931E', '#ACBD28', '#3EB05B'],
            legend: {
                data: ['扫码量','领取量']
            },
            grid: {
                x: 45,
                x2: 20,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: false },
                    dataView: { show: false, readOnly: false },
                    magicType: {
                        show: true,
                        title: {
                            line: '折线图切换',
                            bar: '柱形图切换',
                        },
                        type: ['line', 'bar']
                    },
                    restore: { show: false },
                    saveAsImage: { show: false }
                },
                y: '3',
                x: '230'
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data:dateArr,
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [{
                type: 'value',
            }
            ],
            series: [
                {
                    name: '扫码量',
                    type: 'line',
                    data: res.ScanCount,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                },
                {
                    name: '领取量',
                    type: 'line',
                    data: res.ReceiveCount,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                
                }
            ]
        };
        var Marketing_bar_ele = echarts.init(document.getElementById('Marketing_bar'))
        Marketing_bar_ele.setOption(Marketing_bar_option);

    }
    //圆形进度
    function Circle(res) {
        var activity_item_html = '';
        var colorArr = ['#30B5A7', '#3EB05B', '#ACBD28', '#EA601A'];
        for (var i = 0; i < res.length; i++) {
            var Hasnum = (res[i].Has / res[i].Count)*315
            activity_item_html += '<div class="activity_item">\n' +
'                                <svg xmlns="http://www.w3.org/200/svg" height="110" width="110">\n' +
'                                    <circle class="circle1" cx="55" cy="55" r="50" fill="none" stroke="#E6E6E6" stroke-width="5" stroke-linecap="round" />\n' +
'                                    <circle class="circle2" id="J_demo2" cx="55" cy="55" r="50" fill="none" stroke="' + colorArr[i] + '" stroke-width="5" stroke-dasharray="' + Hasnum + ',315" />\n' +
'                                </svg>\n' +
'                                <div class="activity_item_info">\n' +
'                                    <div style="font-size:25px;color:' + colorArr[i] + '">' + res[i].Has + '</div>\n' +
'                                    <div>已领取</div>\n' +
'                                </div>\n' +
'                                <div style="text-align:center">' + res[i].Name + '</div>\n' +
'                                <div style="text-align:center">奖品数量：<span>' + res[i].Count + '</span> </div>\n' +
'                            </div>'
        }
        $('#activity_con').html(activity_item_html);
    }
    //营销表格
    function MarketingRealtimeQuery(data) {
        var trHtml = '';
        for (var i = 0; i < data.length; i++) {
            trHtml += '<tr>\n' +
'                                <td><img class="tdimg" src=' + data[i].ImagUrl + ' /> </td>\n' +
'                                <td>' + WXDecode(data[i].NickName)+ '</td>\n' +
'                                <td>' + data[i].Code + '</td>\n' +
'                                <td>' + data[i].ActivityTitle + '</td>\n' +
'                                <td>' + data[i].AwardName + '</td>\n' +
'                                <td>' + data[i].Denomination + '元</td>\n' +
'                                <td>' + DateFormat(data[i].Time) + '</td>\n' +
'                                <td>' + data[i].Phone + '</td>\n' +
'                            </tr>'
        }
        $('#MarketingRealtimeQuery').html(trHtml);
    }
    //营销地图
    function Marketing_map(res) {
        if (res.length == 0) {
            res.push[{ name: '北京', value: '3306' }];
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        else {
            var maxValue = (res[0].value * 1.5).toFixed(0);
        }
        var Marketing_map_option = {
            title: {
                text: '区域排名',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
 
            dataRange: {
                min: 0,
                max: maxValue,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },

            series: [
                {
                    name: '营销',
                    type: 'map',
                    mapType: 'china',
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data:res
                }
            ]
        };

        var Marketing_map_ele = echarts.init(document.getElementById('Marketing_map'))
        Marketing_map_ele.setOption(Marketing_map_option);
    }
</script>